{% extends "base.html" %}
{% load static %}

{% block title %}DDoS分类器离线训练展示系统{% endblock %}

{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{% static "css/mainstyle.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "css/buttons.css" %}">
{% endblock %}


{% block content %}
<div id="indexHtml">
    <div class="container-fluid body-content">
        <h1>DDoS分类器离线训练展示系统操作指引</h1>
        <hr/>
        <div class="row">

            <div class="col-md-12" style="height: 100px"></div>

            <div class="col-md-1">
            </div>
            <div class="col-md-2">
                <div class="introCircle" onclick="showDiv(1);">
                    第一步<br/><b style="font-size: 26px">获取历史数据</b><br/>STEP 1
                </div>
            </div>
            <div class="col-md-2 introArrow">
                <img src="{% static "img/ArrowRight.ico" %}" />
            </div>
            <div class="col-md-2">
                <div class="introCircle" onclick="showDiv(2);">
                    第二步<br/><b style="font-size: 26px">训练分类器模型</b><br/>STEP 2
                </div>
            </div>
            <div class="col-md-2 introArrow">
                <img src="{% static "img/ArrowRight.ico" %}" />
            </div>
            <div class="col-md-2">
                <div class="introCircle" onclick="showDiv(3);">
                    第三步<br/><b style="font-size: 26px">下发模型至EGP</b><br/>STEP 3
                </div>
            </div>
            <div class="col-md-1">

            </div>

        </div>
    </div>
</div>

<div id="getDataHtml" class="hideDiv">
    <div class="container-fluid body-content">
        <h1>获取历史数据</h1>
        <hr/>
        <div class="row">

            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="dataTextLine" id="dataTextArea">
                </div>
            </div>
            <div class="col-md-3"></div>

            <div class="col-md-12" style="height:20px"></div>
            
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="getDataCircleBig" id="getDataButton">
                    获取
                </div>
            </div>
            <div class="col-md-3"></div>
            
            
        </div>
    </div>
</div>

<div id="trainModelHtml" class="hideDiv">
    <div class="container-fluid body-content">
        <h1>训练分类器模型</h1>
        <hr/>
        <div class="row">
            
            <div class="col-md-3"><button style="display:none" id="testModelHiddenBtn">hidden</button></div>
            <div class="col-md-6">
                <div class="traingif">
                    <img src="{% static "img/trainClassifier.gif" %}" alt="训练中" width="100%"/>
                </div>
                <div class="testgif">
                    <img src="{% static "img/testloading.gif" %}" alt="测试中" width="100%"/>
                </div>
            </div>
            <div class="col-md-3"></div>
    
            <div class="col-md-12" style="height:20px"></div>
            
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="trainCircleBig" id="trainButton">
                    训练
                </div>
            </div>
            <div class="col-md-3"></div>
            
            <div class="col-md-12" style="height:20px"></div>
            
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="trainTextLine" id="trainTextArea">
                </div>
            </div>
            <div class="col-md-3"></div>
            
        </div>
    </div>
</div>

<div id="distributeModelHtml" class="hideDiv">
    <div class="container-fluid body-content">
        <h1>下发模型至EGP</h1>
        <hr/>
        <div class="row">
            <div class="col-md-12" style="height:10px"></div>
    
            <div class="col-md-2"></div>
            <div class="col-md-3">
                <div class="circle" id="egp0">
                    EGP-1100
                </div>
            </div>
            <div class="col-md-2"></div>
            <div class="col-md-3">
                <div class="circle" id="egp1">
                    EGP-1000
                </div>
            </div>
            <div class="col-md-2"></div>
    
            <div class="col-md-12" style="height:20px"></div>
    
            <div class="col-md-3">
                <div class="circle" id="egp2">
                    EGP-900
                </div>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-4">
                <div class="circle" id="egp3">
                    EGP-800
                </div>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-3">
                <div class="circle" id="egp4">
                    EGP-700
                </div>
            </div>
    
            <div class="col-md-12" style="height:20px"></div>
        <!--   
            <div class="col-md-2"></div>
            <div class="col-md-3">
                <div class="circle" id="egp5">
                    陆工大
                </div>
            </div>
            <div class="col-md-2"></div>
            <div class="col-md-3">
                <div class="circle" id="egp6">
                    30所
                </div>
            </div>
            <div class="col-md-2"></div>
    
            <div class="col-md-12" style="height:20px"></div>
        -->           
            <div class="col-md-2"></div>
            <div class="col-md-8" style="text-align:center">
                <button class="button button-royal button-pill button-giant" id="buttonDistribute">下发模型</button>
                <p class="tip" id="distributeTip"></p>
            </div>
            <div class="col-md-2"></div>
            
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js_script %}
<script>
    /* global var area */
    var isGotData = 0;
    var isTrainedModel = 0;
    var dataFileName = "";
    var modelFileName = "";

    $("#getDataButton").click(function(){
        $("#getDataButton").animate({
            width:'100px',
            height:'100px',
            lineHeight:'100px',
            fontSize:'24px'
        });

        

        $("#dataTextArea").animate({
            height:'450px',
        });

        $("#getDataButton").text("获取中...");
        $("#dataTextArea").attr("style","border: solid 2px; border-color:#ccccff")

        $.ajax({
            url: "{% url 'ajaxGetData' %}",
            type: 'get',
            dataType: 'json',
            success: function(data){
                //{"status":0, "filename":ret}
                // status: 0: success; 1: error
                if(data.status==0){
                    isGotData = 1;
                    dataFileName = data.filename;
                    $("#getDataButton").text("获取成功");
                    $("#getDataButton").css("pointer-events","none");
                    $("#getDataButton").css("cursor","default");
                    $("#dataTextArea").append("<p>获取成功!</p>");
                    $("#dataTextArea").append("<p>File name is :"+data.filename+"</p>");

                }else{
                    $("#getDataButton").text("重新获取");
                    $("#getDataButton").animate({
                        width:'250px',
                        height:'250px',
                        lineHeight:'250px',
                        fontSize:'40px'
                    });
                    $("#dataTextArea").animate({
                        height:'0px',
                        border:'0px'
                    });
                    alert("获取失败,请重试");
                }
            }
        });

    });

    $("#trainButton").click(function(){
        if(isGotData == 0){
            alert("未发现可训练数据，请先获取历史数据");
            return;
        }
        $("#trainButton").animate({
            width:'100px',
            height:'100px',
            lineHeight:'100px',
            fontSize:'24px'
        });

        $('.traingif').css({
            opacity: 0.0,
            visibility: 'visible'
        }).animate({
            opacity: 1.0,
            height: '400px'
        })

        $("#trainButton").text("训练中...");
        $("#trainButton").attr("style","pointer-events: none; cursor:default");

        $.ajax({
            url: "{% url 'ajaxTrainModel' %}",
            data: "filename="+dataFileName,
            type: 'get',
            dataType: 'json',
            success: function(data){
                //result = {"status":status, "modelname":modelname}
                // 0: success; 1: error
                if(data.status==0){
                    isTrainedModel = 1;
                    modelFileName = data.modelname;
                    $('.traingif').css({
                        opacity: 1.0,
                        visibility: 'hidden'
                    }).animate({
                        opacity: 0.0,
                        height: '0px'
                    })
                    $("#trainButton").animate({
                        width:'150px',
                        height:'150px',
                        lineHeight:'150px',
                        fontSize:'26px'
                    });
                    $("#trainButton").text("训练成功,测试中...");
                    $('.testgif').css({
                        opacity: 0.0,
                        visibility: 'visible'
                    }).animate({
                        opacity: 0.8,
                        height: '350px'
                    })
                    $("#trainButton").animate({
                        width:'160px',
                        height:'160px',
                        lineHeight:'160px',
                        fontSize:'18px'
                    });
                    $("#trainTextArea").append("<p>训练成功!</p>");
                    $("#trainTextArea").append("<p>Model file name is :"+data.modelname+"</p>");

                    $("#testModelHiddenBtn").click();
                }else{
                    alert("训练失败,请重试")
                }
            }
        });
    });

    $("#testModelHiddenBtn").click(function(){
        $.ajax({
            url: "{% url 'ajaxTestModel' %}",
            type: 'get',
            dataType: 'json',
            success: function(data){
                //{"status":0, "result":ret}
                //status:   0: success; 1: error
                if(data.status == 0){
                    $('.testgif').css({
                        opacity: 1.0,
                        visibility: 'hidden'
                    }).animate({
                        opacity: 0.0,
                        height: '0px'
                    })
                    $("#trainButton").animate({
                        width:'120px',
                        height:'120px',
                        lineHeight:'120px',
                        fontSize:'26px'
                    });
                    $("#trainButton").text("训练成功");

                    $('#trainTextArea').animate({
                        height: '380px'
                    });
                    $("#trainTextArea").attr("style","border: solid 2px; border-color:#ccccff; display:block")
                }else{
                    alert("训练失败,请重试")
                }
            }
        });
    });

    var egpNum = 5;
    //var egpName = new Array("国防科大","东南大学","南航","计算所","电子科大","陆工大","30所");
    var egpName = new Array("EGP-1100","EGP-1000","EGP-900","EGP-800","EGP-700");    
    $("#buttonDistribute").click(function(){
        if(isTrainedModel == 0){
            alert("未发现模型文件，请先训练分类器模型");
            return;
        }

        $("#distributeTip").text("");

        for(var i=0; i<egpNum; i++){
            $("#egp"+i).attr("style","border: solid 1px; border-color:rgb(254,179,40)");
        }

        $("#buttonDistribute").text("下发ing ... ");
        var responsed = 0; //标记已经接收了多少个
        var failCount = 0; //标记未发送成功的个数

        for(var i=0; i<egpNum; i++){
            $.getJSON("{% url 'ajaxDistribute' %}","egpID="+i+"&modelname="+modelFileName,function(data){
                egpID = data[0];
                status = data[1]; //0:success; 1:timeout; 2:recv error; -1:internel error
                if(status == -1){
                    //$("#egp"+egpID).attr("style","border: solid 4px; border-color:purple");
                    $("#egp"+egpID).attr("style","background-color: #660033; border-color:#660033");
                    $("#distributeTip").append("发送至"+egpName[egpID]+"时：<b style='color:purple'>内部错误</b>，请检查发送端。&nbsp;&nbsp;");
                    failCount += 1;
                }else if(status == 1){
                    //$("#egp"+egpID).attr("style","border: solid 4px; border-color:red");
                    $("#egp"+egpID).attr("style","background-color: #cc0033; border-color:#cc0033");
                    $("#distributeTip").append("发送至"+egpName[egpID]+"时：<b style='color:#cc0033'>出现超时</b>，请检查网络并重试。&nbsp;&nbsp;");
                    failCount += 1;
                }
                else if(status == 2){
                    $("#egp"+egpID).attr("style","background-color: red; border-color:red");
                    $("#distributeTip").append("发送至"+egpName[egpID]+"时：<b style='color:red'>接收错误</b>，请重新发送。&nbsp;&nbsp;");
                    failCount += 1;

                }else{
                    $("#egp"+egpID).attr("style","background-color: green; border-color:green");
                    $("#distributeTip").append("发送至"+egpName[egpID]+"时：<b style='color:green'>发送成功</b>。&nbsp;&nbsp;");
                }

                responsed += 1;
                if(responsed == egpNum){
                    if(failCount > 0){
                        $("#buttonDistribute").text("重新下发模型");
                    }else{
                        $("#buttonDistribute").text("发送成功");
                    }                 
                }
            });
        }
    });
</script>
{% endblock %}